<template>
  <div class="article" v-if="thisArticle.title">
    <div class="article__main">
      <h1 class="article__title">{{thisArticle.title}}</h1>
      <list-meta :author="thisArticle.author" :createAt="thisArticle.createAt" :love="thisArticle.love" :readingQuantity="thisArticle.readingQuantity"></list-meta>
      <div class="article__content markdown-body" v-html="thisArticle.html" ref="post"></div>
      <div class="article__footer">
        <!-- <template v-if="shouldShow"> -->
          <div class="link">
            本文链接：
            <i>
              {{SITEURL}}{{$route.path}}
            </i>
            <span @click="copyPageUrl">复制</span>
            </div>
          <div class="post-info">
            <p> 发表于 <i>{{thisArticle.createAt}}</i> ，
              所属「
              <span>
                  <code class="notebook" v-if="thisArticle">{{sortFilter(thisArticle.sort)}}</code>
              </span> 」分类 ，并被添加「
              <span v-for="tag in thisArticle.tags">
                  <code class="notebook">{{tag.title}}</code>
              </span> 」标签<span v-if="thisArticle.updateAt!==thisArticle.createAt">，最后修改于 <i>{{thisArticle.updateAt}}</i></span>
            </p>
          </div>
        <!-- </template>  -->
      </div>
    </div>
    <navigation></navigation>
    <share-box :thistitle="thisArticle.title" :desc="thisArticle.desc"></share-box>
    <div v-if="thisArticle._id">
      <comment :articleid="$route.params.id"></comment>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import listMeta from 'base/articleList/meta.vue'
import navigation from './navigation.vue'
import { SITEURL } from 'common/utils'
import ShareBox from 'base/Share'
import comment from 'views/comment'
export default {
  name: 'articleContent',
  data() {
    return {
      article: '',
      post: 'ee',
      SITEURL: SITEURL
    }
  },
  components: {
    listMeta,
    navigation,
    comment,
    ShareBox
  },
  created() {
    if (this.sortList.length === 0) {
      this.$store.dispatch('GetSortList', { pageindex: 1, pagesize: 100 })
    }
    if (!this.thisArticle.html && !this.$route.params.id) {
      this.$router.back()
    } else if (this.thisArticle._id !== this.$route.params.id) {
      this.getArticle()
      for (let i = 0, len = this.articleList.length; i < len; i++) {
        if (this.$route.params.id === this.articleList[i]._id) {
          this.articleList[i].readingQuantity += 1
          return
        }
      }
    }
  },
  mounted() {
    setTimeout(() => {
      this.category = []
      // 提取文章标签，生成目录
      this.$refs.post && Array.from(this.$refs.post.querySelectorAll('h1,h2,h3,h4,h5,h6')).forEach((item, index) => {
        item.id = item.localName + '-' + index
        this.category.push({
          tagName: item.localName,
          text: item.innerText,
          href: '#' + item.localName + '-' + index,
          height: item.offsetTop
        })
      })
      this.createCategory()
    }, 800)
  },
  methods: {
    copyPageUrl() {
      this.$root.$copyToClipboard(this.SITEURL + this.$route.path)
    },
    async getArticle() {
      try {
        await this.$store.dispatch('GetThisArticle', this.$route.params.id).then((res) => {
          this.article = res
        }).catch(e => {
          console.log(e)
          // this.$router.replace('/404')
          this.$router.replace({ name: '404', params: { text: '你的参数有误，没有这篇文章的' }})
        })
      } catch (e) {
        console.log(e)
      }
    },
    async createCategory() {
      try {
        await this.$store.dispatch('CreateCategory', this.category)
      } catch (e) {
        this.$router.replace('/404')
      }
    },
    sortFilter(id) {
      const s = this.sortList.filter(sortId => {
        return id === sortId._id
      })
      if (s.length === 1) {
        return s[0].title
      } else {
        return ''
      }
    }
  },
  beforeDestroy() {
    this.$store.dispatch('CreateCategory', [])
  },
  computed: {
    ...mapGetters([
      'articleList',
      'thisArticle',
      'sortList'
    ])
  }
}
</script>
<style lang="scss" scoped>
  .article__main {
    padding: 5px 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    width: 100%;
    background-color: rgba(255,255,255,0.5);
    h1 {
      font-size: 18px;
    }
  }
  .article__footer {
    border-top: 1px #555 dashed;
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 20px;
    .notebook {
      background-color: rgba(255,255,255,0.5);
      border-radius: 5px;
      color: #0e263e;
      font-family: Consolas,Courier New,Courier,mono,serif;
      font-size: 80%;
      margin: 0 5px;
      padding: 2px 5px;
      vertical-align: middle;
    }
    .post-info {
      p {
        margin-top: 0px;
      }
    }
    .link {
      user-select: none;
      padding:5px;
      overflow: hidden;
      margin-top: 5px;
      span {
        display: none;
        margin-left: 10px;
        padding:0 3px;
        cursor: pointer;
        color: #666;
        border-radius: 5px;
        background-color: rgba(255,255,255,0.3);
      }
      &:hover {
        span {
          display: inline-block;
        }
      }
    }
  }
</style>
